<template>
  <div class="card">
    <div class="card-img">
      <router-link :to="`/blog/${listItem.id}`">
        <div class="cover" :style="{'background': 'url('+ listItem.firstPicture +') 0% 0% / cover'}"></div>
        <div class="description">
          <p v-text="listItem.description"></p>
        </div>
      </router-link>
    </div>
    <div class="meta">
      <div class="info">
        <Icon v-if="listItem.top" type="ios-paper-plane" style="color: red"/>
        <span v-if="listItem.top">| </span>
        <Icon type="md-calendar" />
        <span v-text="createTime"></span>
        <span>| </span>
        <Icon type="ios-bookmarks" />
        <span v-text="listItem.type.name"></span>
      </div>
      <router-link class="title" :to="`/blog/${listItem.id}`" v-text="listItem.title">
      </router-link>
      <div class="tags">
        <a v-for="item in listItem.tagList"
          :key="item.id + '-' + item.name"
          v-text="item.name"
          :style="{'color':item.color}"
        ></a>
      </div>
      <div class="summary">
        <span class="views">
          <Icon type="ios-eye" style="color: green; font-size: 16px;"/>
          <span v-text="listItem.views"></span>
        </span>
        <span class="comments">
          <Icon type="md-chatboxes" style="color: blue; font-size: 14px;"/>
          <span v-text="listItem.comments"></span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "utils/utils"

export default {
  name: 'Card',
  props: {
    listItem: Object,
  },
  computed: {
    createTime() {
      return formatDate(new Date(this.listItem.createTime), "yyyy-MM-dd");
    }
  }
}
</script>

<style lang='scss' scoped>
.card {
  position: relative;
  box-shadow: 0 2px 9px rgba(31,45,61,.15);
  border-radius: 8px;
  margin-bottom: 1.1rem;
  .card-img {
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    height: 150px; //固定图片高度
    a {
      color: inherit;
      text-decoration: none;
      .cover {
        display: block;
        padding-top: 0;
        width: 100%;
        height: 100%; 
        transition: all 0.5s ease;
      }
      .description {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 10px 20px;
        overflow: hidden;
        p {
          color: #fff;
          margin-top: 60px;
          opacity: 0;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
        }
      }
    }
  }
  .meta {
    padding: 8px 15px;
    background: #fff;
    border-radius: 0 0 13px 13px;
    .info {
      color: #8492a6;
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      position: relative;
      span {
        margin-left: 3px;
      }
    }
    a.title {
      color: #475669;
      font-size: 16px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      transition: all 0.5s ease;
      &:hover {
        color: #28cfcf;
      }
    }
    .tags {
      position: relative;
      margin-top: 5px;
      white-space: nowrap;
      overflow: hidden;
      color: transparent;
      transform-origin: left;
      transition: .5s;
      &:before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(90deg,rgba(255,255,255,0),#fff);
      }
      a {
        display: inline-block;
        font-size: 10px;
        line-height: 20px;
        padding: 0 10px;
        margin-right: 3px;
        position: relative;
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          color: inherit;
          background: currentColor;
          border-radius: 20px;
          opacity: .15;
        }
      }
    }
  }
  .summary {
    position: absolute;
    left: 35px;
    bottom: 10px;
    font-size: 12px;
    color: #657487;
    opacity: 0;
    transform-origin: right;
    transition: .5s;
    span {
      padding-right: 10px;
      display: inline-block;
    }
  }
  &:hover {
    box-shadow: 0px 2px 14px 2px rgba(31,45,61, 0.15);
    .tags {
      opacity: 0;
      transform: scale(0.5);
    }
    .summary {
      transform: scale(1.2);
      opacity: 1;
    }
    a {
      .cover {
        filter: blur(1px);
        transform: scale(1.1);
      }
      .description {
        background-color: rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        p{
          margin-top: 0;
          opacity: 1;
          transition: 0.5s;
        }
      }
    }
  }
}
</style>